<template>
  <div class="matchInfo">
    <div class="navimg">
      <img
        v-if="infoData.icon"
        :src="'http://img.wangyuhudong.com/'+infoData.icon"
        width="100%"
        height="100%"
      >
    </div>
    <div class="infodetail">
      <div class="left">
        <div>{{infoData.organiser}}</div>
        <div class="price">
          <span class="light">{{infoData.prize}}</span>
        </div>
        <div>赛事时间：{{infoData.date}}</div>
      </div>
      <div class="right">
        <div>{{infoData.cenueCount}}赛点/{{infoData.provinceCount}}省</div>
        <div class="infor" @click="goDetail(infoData.id)">赛事详情</div>
        <!-- <div class="preview"><i class="iconfont icon-yulan"></i>
          <div class="number">{{infoData.readCount}}人浏览</div>
        </div>-->
      </div>
    </div>
    <div class="moudletitle">
      <div class="line"></div>
      <div class="title">赛事进程</div>
    </div>
    <div class="progress">
      <div class="point" v-for="(lists,index) in processList" @click="changePoint(lists.id)">
        <div class="top">
          <div class="number">{{index+1}}</div>
          <div class="triangle"></div>
        </div>
        <div class="mid">{{lists.name}}</div>
        <div class="bottom">{{lists.start_date | formatTime}}~{{lists.end_date | formatTime}}</div>
      </div>
    </div>
    <div class="moudletitle">
      <div class="line"></div>
      <div class="title">赛点分布</div>
    </div>
    <div class="spread">
      <div class="list title">
        <div class="items">赛区</div>
        <div class="items">赛点</div>
        <div class="items">比赛日</div>
        <div class="items"></div>
      </div>
      <ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        v-if="haveLists"
      >
        <li class="listdetail" v-for="list in pointLists">
          <div class="items">{{list.division}}</div>
          <div class="items">{{list.name}}</div>
          <div class="items">{{list.fight_date | formatTime2}}</div>
          <div class="items matchpoint" @click="goCheckpoint(list.netbar_id)">看赛点</div>
        </li>
      </ul>
      <div class="withoutPoint" v-else>该进程下暂无赛点</div>
      <div class="c-flex c-j-c loading">
        <p v-show="loading" class="page-infinite-loading">
          <mt-spinner type="fading-circle" color="#fff" :size="30"></mt-spinner>加载中...
        </p>
      </div>
      <div class="mask" v-show="loading"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "matchInfo",
  data() {
    return {
      infoData: [],
      processList: [],
      pointLists: [],
      curpointId: "",
      pagenum: 2,
      listMore: true,
      haveLists: true,
      loading:false
    };
  },

  mounted() {
    //获取赛事详情
    var params = {};
    this.curpointId = this.$route.query.id;
    params.matchId = this.curpointId;
    this.loading = true;
    this.axios
      .get("matches/detail", { params: params })
      .then(res => {
        this.loading = false;
        var _data = res.data;
        this.infoData = _data.object;
        document.title = this.infoData.title;
        this.processList = this.infoData.processList;

        //获取当前赛点分布
        var params_id = {};
        params_id.matchProcessId = this.infoData.currProcessId;
        this.getpointList(params_id);
      })
      .catch(error => console.log(error));
  },

  methods: {
    changePoint(id) {
      this.curpointId = id;
      var params = {};
      params.matchProcessId = this.curpointId;
      this.getpointList(params);
    },
    goDetail(id) {
      this.$router.push({
        path: "/matchDetail/?id=" + id
      });
    },
    getpointList(param) {
      this.axios
        .get("matchesCenue/list", { params: param })
        .then(res => {
          var _object = res.data.object;
          if (_object.total) {
            this.haveLists = true;
            this.pointLists = _object.list;
          } else {
            this.haveLists = false;
          }
        })
        .catch(error => console.log(error));
    },
    loadMore() {
      var params = {};
      params.page = this.pagenum;
      params.matchProcessId = this.curpointId;
      if (this.listMore) {
        this.axios
          .get("matchesCenue/list", { params: params })
          .then(res => {
            var _data = res.data;
            this.pointLists = this.pointLists.concat(_data.object.list);
            // console.log(this.pointLists.length);
            if (_data.object.total > 20 * this.pagenum) {
              this.listMore = true;
            } else {
              this.listMore = false;
            }
            this.pagenum++;
          })
          .catch(error => console.log(error));
      }
    },
    goCheckpoint(id) {
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        window.AndroidWebView.goNetbarDetail(id);
      }
      if (isIOS) {
        window.webkit.messageHandlers.showNetbarDetail.postMessage([id]);
      }
    }
  }
};
</script>

<style lang="less">
.navimg {
  width: 7.5rem;
  height: 3.2rem;
}

.infodetail {
  width: 7.5rem;
  height: 2.1rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0.02rem 0.06rem 0 rgba(216, 216, 216, 0.35);
  display: flex;
  justify-content: space-between;

  .left {
    margin: 0.3rem 0 0 0.3rem;
    color: #999;

    .price {
      color: #333;
      margin: 0.1rem 0;
    }

    .light {
      color: #ffb403;
      font-size: 0.54rem;
    }
  }

  .right {
    margin: 0.3rem 0.3rem 0 0;
    color: #999;

    .infor {
      width: 1.51rem;
      height: 0.4rem;
      border: 0.02rem solid rgba(255, 184, 25, 1);
      border-radius: 0.2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0.35rem 0 0.2rem 0;
      cursor: pointer;
    }

    .preview {
      display: flex;
      flex-direction: row;
      height: 0.35rem;
      line-height: 0.35rem;

      .iconfont {
        font-size: 0.3rem;
        color: #c1c1c1;
        margin-right: 0.1rem;
      }

      .number {
      }
    }
  }
}

.moudletitle {
  display: flex;
  flex-direction: row;
  height: 1rem;
  margin-left: 0.3rem;
  align-items: center;

  .line {
    width: 0.06rem;
    height: 0.3rem;
    background: linear-gradient(
      180deg,
      rgba(255, 179, 2, 1),
      rgba(255, 200, 18, 1)
    );
    border-radius: 0.03rem;
  }

  .title {
    color: #333;
    font-size: 0.3rem;
    margin-left: 0.15rem;
  }
}

.progress {
  width: 100%;
  height: 1.24rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0.02px 0.06rem 0 rgba(216, 216, 216, 0.35);
  display: flex;
  flex-direction: row;

  .point {
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .top {
      width: 0.35rem;
      height: 0.46rem;
      background: linear-gradient(
        -90deg,
        rgba(255, 197, 46, 1),
        rgba(255, 175, 58, 1)
      );
      border-radius: 0.05rem;
      position: relative;

      .number {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 0.2rem;
        font-weight: bold;
      }

      .triangle {
        width: 0;
        height: 0;
        border-width: 0 0.17rem 0.17rem;
        border-style: solid;
        border-color: transparent transparent #fff;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }

    .mid {
      font-size: 0.22rem;
      color: rgba(51, 51, 51, 1);
      margin-top: 0.1rem;
    }

    .bottom {
      font-size: 0.18rem;
      color: rgba(153, 153, 153, 1);
    }
  }
}

.spread {
  width: 100%;
  height: 3.6rem;
  background: rgba(255, 255, 255, 1);
  overflow: auto;

  .items {
    float: left;
    width: 25%;
    height: 0.6rem;
    text-align: center;
    line-height: 0.6rem;
  }

  .list {
    width: 100%;
    height: 0.6rem;
    border-bottom: 0.01rem solid rgba(230, 230, 230, 1);

    &.title {
      font-size: 0.26rem;
      font-weight: bold;
    }
  }

  .listdetail {
    font-size: 0.22rem;
    color: #999999;
    width: 100%;
    height: 0.6rem;
    border-bottom: 0.01rem solid rgba(230, 230, 230, 1);

    .matchpoint {
      width: 1rem;
      height: 0.3rem;
      background: linear-gradient(
        -45deg,
        rgba(255, 179, 2, 1),
        rgba(255, 201, 18, 1)
      );
      border-radius: 0.15rem;
      color: #fff;
      text-align: center;
      font-size: 0.2rem;
      line-height: 0.3rem;
      margin-top: 0.15rem;
    }
  }

  .withoutPoint {
    text-align: center;
    margin-top: 0.5rem;
    color: #333;
  }
}
</style>